<template>
	<div class="layout-padding">
		<div class="fenxi">
			<div class="content">
				<div class="level">
					<div class="level-r">
						<div class="condition">
							<div class="time">
								<div class="select-con">
									<div>统计周期:</div>
									<el-select v-model="dateType2" placeholder="请选择" @change="dateTypeChange2">
										<el-option label="日" value="daterange"></el-option>
										<el-option label="月" value="monthrange"></el-option>
										<el-option label="年" value="yearrange"></el-option>
									</el-select>
								</div>
								<div class="time-picker">
									<div>
										<el-date-picker
											style="width: 350px"
											v-model="value2"
											:type="dateType2"
											placeholder="请选择"
											:format="dateFormat2"
											:value-format="dateFormat2"
											:disabled-date="pickerOptions1"
										/>
									</div>
								</div>
								<el-button style="margin-left: 10px" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">查询 </el-button>
								<el-button style="margin-left: 10px" class="filter-item" icon="el-icon-refresh" @click="resetSearch">重置 </el-button>
							</div>
						</div>
						<div class="level-content">
							<div id="data-chart" ref="dataChart"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from '/@/utils/chart';
import { getDateByType } from '/@/utils/util';
import moment from 'moment';
import { getCompare, getWeather } from '/@/api/energymanagement/energyuse/compare';

let myChart;
export default {
	components: {},
	data() {
		return {
			activeName: 'areaId',
			dateType2: 'daterange',
			sdIndex: 1,
			value2: [],
			treeData: [],
			treeDataProps: {
				label: 'name',
				value: 'id',
			},
			data1: [], //主机
			data2: [], //水泵
			data3: [], //冷却塔
			data4: [], //温度
			xAxisData: [],
			dateFormat2: 'YYYY-MM-DD HH',
			sortData: [],
			itemData: [],
			tableData: [],
			defaultColumn: [
				{
					type: 'input',
					label: '汇总项',
					prop: 'reportName',
					fixed: 'left',
					width: 180,
					overHidden: true,
				},
				{
					type: 'input',
					label: '总和',
					prop: 'sumTotal',
					fixed: 'left',
					width: 180,
					overHidden: true,
				},
			],
			tableOption: {
				border: true,
				excelBtn: true,
				gridBtn: false,
				index: true,
				indexLabel: '序号',
				stripe: true,
				labelWidth: '160',
				indexWidth: '60',
				menuAlign: 'center',
				align: 'center',
				addBtn: false,
				menu: false,
				height: 250,
				fit: true,
				refreshBtn: false,
				columnBtn: false,
				searchMenuSpan: 6,
				searchLabelWidth: 'auto',
				searchMenuPosition: 'left',
				column: [
					{
						type: 'input',
						label: '汇总项',
						prop: 'reportName',
						fixed: 'left',
						width: 180,
						overHidden: true,
					},
					{
						type: 'input',
						label: '总和',
						prop: 'sumTotal',
						fixed: 'left',
						width: 180,
						overHidden: true,
					},
				],
			},
			form: {},
			energyType: '1',
			fileKey: 'areaId',
			fileValue: '',
			highlight: true,
			growthRate: '',
			fenxiangIndex: 1,
			deptName: '',
			currentNodeKey: '',
			deptUnitNo: '',
			dimTypeObj: {
				areaId: 'powerAreaContrast',
				departmentId: 'powerDeptContrast',
				equipment: 'powerKeqContrast',
				branchingId: 'powerBranchContrast',
				modelType: 'powerSubitemContrast',
			},
		};
	},
	watch: {
		dateType2: {
			handler(val, oldVal) {
				if (val == 'yearrange') {
					this.dateFormat2 = 'YYYY';
				} else if (val == 'monthrange') {
					this.dateFormat2 = 'YYYY-MM';
				} else {
					this.dateFormat2 = 'YYYY-MM-DD';
				}
			},
			immediate: true,
		},
	},
	mounted() {
		this.value2 = [moment().subtract(1, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
		this.searchData();
	},
	methods: {
		pickerOptions1(time) {
			return time.getTime() > Date.now();
		},

		initChart(xData, legendData, seriesData) {
			//检测是否已经存在echarts实例，如果不存在，则不再去初始化
			myChart = echarts.getInstanceByDom(this.$refs.dataChart);

			const series = legendData.map((name, sid) => {
				if (name == '温度') {
					return {
						name,
						type: 'line',
						yAxisIndex: 1,
						data: seriesData[sid].map((item) => item.maxValue),
					};
				} else {
					return {
						name,
						type: 'bar',
						stack: 'total',
						barWidth: '60%',
						data: seriesData[sid].map((item) => item.scc),
					};
				}
			});
			//如果为空 则正常进行渲染 反之 不再进行初始化
			if (myChart == null) {
				myChart = echarts.init(this.$refs.dataChart);
			} else {
				myChart.clear();
			}
			myChart.setOption({
				grid: {
					left: '5%',
					top: '10%',
					bottom: '8%',
					right: '3%',
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
					},
					textStyle: {
						color: '#333',
						fontSize: 14,
					},
				},
				toolbox: {
					show: true,
					feature: {
						magicType: { type: ['line', 'bar'] },
						restore: {},
						saveAsImage: {},
					},
				},
				legend: {
					show: true,
					top: '3%',
					data: legendData,
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisLabel: {
							show: true,
							color: '#999',
							rotate: 30
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#0ba2b6',
							},
						},
					},
				],
				yAxis: [
					{
						name: 'kWh',
						type: 'value',
						axisLabel: {
							color: '#999',
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#0ba2b6',
							},
						},
						splitLine: {
							lineStyle: {
								color: '#345787',
								type: 'dashed', // y轴分割线类型
							},
						},
					},
					{
						type: 'value',
						name: '温度',
						min: 0,
						max: 50,
						interval: 5,
						axisLabel: {
							formatter: '{value} °C',
						},
					},
				],
				series,
			});
		},
		// 切换统计周期，同比没有日周期和月周期
		dateTypeChange2(val) {
			this.dateType2 = val;
			if (val == 'yearrange') {
				this.value2 = [this.getNowDate().year, this.getNowDate().year];
			} else if (val == 'monthrange') {
				this.value2 = [this.getNowDate().month, this.getNowDate().month];
			} else {
				this.value2 = [this.getNowDate().date, this.getNowDate().date];
			}
		},

		async searchData() {
			//主机
			await getCompare({
				startDate: this.value2[0],
				endDate: this.value2[1],
				idList: '9f6cc14a086b44069ee6059b27033405,6b0addbf05d841bdb0f76a60391ab21a',
			}).then((res) => {
				this.data1 = res.data;
				this.xAxisData = res.data.map((item) => {
					return item.timeValue;
				});
				return this.data1;
			});
			//水泵
			await getCompare({
				startDate: this.value2[0],
				endDate: this.value2[1],
				idList:
					'e6e89d1b69c74caf9ab6dd098e030faf,4e81519cbe3446bda8ec89bdb74bc853,2275100b7dbe46ffa866fc555355ec3f,4aa648e87fe24412b8d3b2b6f636e406,b401ca52fec74177b40dc7a8f5674bac,900d760d1a7a4ab296367a362103ea56,b6b6823d4bf842eea7aa122f14f4c795',
			}).then((res) => {
				this.data2 = res.data;
			});
			//冷却塔
			await getCompare({
				startDate: this.value2[0],
				endDate: this.value2[1],
				idList:
					'fce19b86fe194b0f8a77af30857dd4dd,d999f4b473d24412a5aba6cac51f2d11,0e44e2fa08bf4101877efa7d90042f32,4bd40b35dd3f42ada10764926c9161ce,72b1b5bc798345b38ae1a483b75d1cc0,6e65e6313a6c4b67aaf2ad0b8d271bc9,29665768d24e4654918670ff2f18c44f,3647402ea2e34d898ee3742063f975fa',
			}).then((res) => {
				this.data3 = res.data;
			});
			//温度
			await getWeather({
				startDate: this.value2[0],
				endDate: this.value2[1],
			}).then((res) => {
				this.data4 = res.data;
			});
			nextTick(() => {
				this.tableLoading = true;
				var legendData = ['主机', '水泵', '冷却塔', '温度'];
				var series = [this.data1, this.data2, this.data3, this.data4];
				this.initChart(this.xAxisData, legendData, series);
			});
		},
		//重置
		resetSearch() {
			this.$refs.deptTree.setCheckedKeys([]);
			if (this.dateType2 == 'yearrange') {
				this.value2 = [this.getNowDate().year, this.getNowDate().year];
			} else if (this.dateType2 == 'monthrange') {
				this.value2 = [this.getNowDate().month, this.getNowDate().month];
			} else {
				this.value2 = [this.getNowDate().date, this.getNowDate().date];
			}
		},

		getNowDate() {
			let dateObj = getDateByType();
			let obj = {
				year: '',
				month: '',
				date: '',
			};
			obj.year = String(dateObj.year);
			obj.month = dateObj.year + '-' + dateObj.month;
			obj.date = dateObj.year + '-' + dateObj.month + '-' + dateObj.date;
			return obj;
		},
	},
};
</script>

<style lang="scss" scoped>
#data-chart {
	height: 600px;
}

.fenxi {
	height: 100%;
	::v-deep .demo-tabs {
		background: #fff;
		padding: 10px;
		.el-tabs__header {
			margin-bottom: 0;
			display: inline-block;
		}
		.el-tabs__nav-wrap:after {
			background-color: initial;
		}
		.el-tabs__item {
			// height: 60px;
			// line-height: 60px;
			margin: 0 10px;
		}
	}
	.content {
		//margin-top: 10px;
		height: 100%;
	}
	.level {
		display: flex;
		height: 100%;
		.level-l {
			width: 20%;
			background: #fff;
			margin-right: 6px;
		}
		.level-r {
			width: 100%;
			margin-left: 6px;
		}
		.shui-dian {
			border-top: 1px solid #eee;
			padding: 20px;
			// text-align: center;
			.active {
				background: var(--el-color-primary);
				color: #fff;
			}
			span {
				display: inline-block;
				width: 80px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
				color: #333;
				margin-right: 10px;
				margin-top: 10px;
				text-align: center;
				transition: all 0.5s;
				cursor: pointer;
				border: 1px solid #efefef;
				&:hover {
					background: var(--el-color-primary);
					color: #fff;
				}
			}
		}
		.condition {
			height: 64px;
			border: 1px solid #efefef;
			background: #fff;
			display: flex;
			align-items: center;
			padding: 0 10px;
		}
		.level-content {
			position: relative;
			background: #fff;
			margin-top: 10px;
			padding: 0 10px;
			width: 100%;
			height: 100%;
			.data-table {
				margin-top: 30px;
			}
			.unit {
				position: absolute;
				left: 20px;
				top: 10px;
				font-size: 14px;
				font-weight: 700;
			}
		}
	}
}
.head {
	padding: 20px 10px;
	position: relative;
	font-size: 18px;
	padding-left: 25px;
	&:before {
		content: '';
		width: 2px;
		position: absolute;
		height: 24px;
		left: 10px;
		background: var(--el-color-primary);
	}
}
.select-con {
	display: flex;
	align-items: center;
	.el-select {
		margin-left: 5px;
		width: 90px;
	}
}
.time {
	display: flex;
	align-items: center;
	.time-tab {
		display: flex;
		align-items: center;
		border: 1px solid #eee;
		border-radius: 4px;
		margin-right: 50px;
		div {
			// margin: 0 15px;
			padding: 0 20px;
			height: 36px;
			transition: all 0.5s;
			line-height: 36px;
			text-align: center;
			cursor: pointer;
			&:not(:last-child) {
				border-right: 1px solid #eee;
			}
			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}
		.active {
			background: var(--el-color-primary);
			color: #fff;
		}
	}
}
.huanbi {
	margin-left: 50px;
}

.dept {
	height: 100%;
	padding: 20px;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
	background: #eaeaea;
}
.time-picker {
	margin-left: 10px;
	width: 370px;
}
</style>
